<template>
<div>
    <my-hearder></my-hearder>
    <main style="background-color: #f2f2f2;margin: 0;padding: 0;">
        <div>
            <div style="width:1190px;margin: 0 auto;height: 45px;background-image: url(/img/dizhi3x.png);background-repeat: no-repeat;background-position: left;">
                <ul class="tou" style="margin: 0;padding: 0;list-style: none;">
                    <li><span>{{city}}租房社区</span></li>
                    <li>></li>
                    <li><span id='text2'>{{sss?'不限':'求租'}}专区</span></li>
                    <li>></li>
                    <li><span id='text2'>帖子详情页</span></li>
                </ul>
            </div>
        </div>
        <div style="width: 1190px;margin: 0 auto;" class="clear">
            <div id='text' style="height: 79px;text-align: center;font-size: 26px;line-height: 79px; border-bottom: 1px solid #e5e5e5;" class="main-m">
                <div style="width: 200px;height: 75px;float: left;padding-left: 30px;">
                    <ul id="fs" @click="bian">
                        <li :style="{'border-bottom':sss?'4px solid red':'0','font-weight':sss?'600':'500'}">出租</li>
                        <li :style="{'border-bottom':!sss?'4px solid red':'0','font-weight':!sss?'600':'500'}">求租</li>
                    </ul>
                </div>
                <span>{{sss?'不限':'求租'}}专区</span>
                <div style="float: right;cursor: pointer; width: 200px;margin-right: 25px; height: 75px;background-image: url(/img/qiehuan_city.png);background-repeat: no-repeat;background-position: right;font-size: 17px;text-align: right;padding-right:50px ;">{{city}}</div>
            </div>
            <div style="height: 80px;width: 1190px;background-color: #fff;" class="main-b clear">
                <div>
                    <ul>
                        <li>地址</li>
                    </ul>
                    <input type="text" placeholder="请输入地址" style="text-indent: 10px;" v-model='dizhi'>
                </div>
                <div style="font-size: 15px;">
                    <ul>
                        <li>租金</li>
                    </ul>
                    <input type="text" v-model='small' style="text-indent: 10px;" placeholder="0">-<input type="text" v-model='big' placeholder="3000" style="text-indent: 10px;">元/月
                </div>
                <div style="position: relative;">
                    <ul>
                        <li style="z-index: 999;position: relative;background-color: white;">专区类型</li>

                    </ul>
                    <div style="position: relative; top:0"> <input id='text3' type="text"  style="text-indent: 10px;"  v-model='lex'>
                        <div id="hid">
                            <ul id='chos' :style="{top:xl?'-60px':0}">
                                <li @click='zsy'>找室友</li>
                                <li @click='zzu'>转租</li>
                            </ul>
                        </div>
                    </div>
                    <div id='cha' @click="xiala" style="position: absolute;top: 30px;left: 160px;cursor: pointer;z-index: 1001;"><img src="/img/jiant_down.png" alt=""></div>
                    <div @click='search' style="position: absolute;top:15px;left: 250px;width: 90px;height: 50px;line-height: 50px;text-align: center; font-size: 16px; background-color:#ee3843;border-radius: 5px;color: white;cursor: pointer;">搜索</div>
                </div>
            </div>
            <div class="list">

                <ul id="list-a" :style="{display:sss?'block':'none'}">
                    <li class="clear" v-for="item,i of data" :key="i">
                        <div style="height: 150px;width: 200px;">
                            <a href=""><img :src="pic[i].split('|')[0]" alt="" style="display: inline;width: 100%;height: 100%;"></a>
                        </div>
                        <div style="height: 150px;">
                            <div style="position: relative;">
                                <h3 style="width: 450px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin: 0;"><router-link :to="{name:'shiyou',query:{lid:data[i].hid,type:1}}" >{{item.hdesc}}</router-link><span style="position: absolute;font-weight: 500; top: 0;right: 0;color:#e8323f;font-size: 25px;">{{item.hprice}}元</span></h3>
                            </div>
                            <p style="margin-top:10px">
                                <span style="background-image: url(/img/danjian@2x.png);">{{item.hxing.split('|')[0]}}</span>
                                <span :style="{'background-image':item.hxing.split('|')[1]!='不限'?'url(/img/xingbie@2x.png)':'url(/img/buxian@2x.png)'}">{{item.hxing.split('|')[1]}}</span>
                                <span style="background-image: url(/img/ruzhu@2x.png);">{{day[i].split('/')[1]}}月{{day[i].split('/')[2]}}日入住</span>
                            </p>
                            <div style="margin-top:10px"><span style="background-image: url(/img/dizhi3x.png);background-repeat: no-repeat;background-position: left;background-size: 8px; display: inline-block;padding-left: 20px;font-size: 12px;color:#979798">{{item.s_dz}}</span></div>
                            <div style="width: 610px;margin-top:20px"><span style="display: inline-block;width: 40px;height: 20px;text-align: center;line-height: 20px; background-color:#eff6fa;color:#379ac7;font-size: 12px;">{{item.htype}}</span><span style="width: 100px;height: 20px;text-align: right;line-height: 20px; color:#c4c4c4;font-size: 12px;float: right;">{{day[i].split('/')[0]}}-{{day[i].split('/')[1]}}-{{day[i].split('/')[2]}}</span></div>
                        </div>
                    </li>
                </ul>
                <ul id='list-b' :style="{display:!sss?'block':'none'}">
                    <li class="clear"  v-for="item,i of data" :key="i">
                        <div style="height: 150px;width: 200px;">
                            <a href=""><img :src="pic[i].split('|')[0]" alt="" style="display: inline;width: 100%;height: 100%;"></a>
                        </div>
                        <div style="height: 150px;">
                            <div style="position: relative;">
                                <h3 style="width: 450px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin: 0;"><router-link :to="{name:'shiyou',query:{lid:data[i].hid,type:0}}" >{{item.hdesc}}</router-link><span style="position: absolute;font-weight: 500; top: 0;right: 0;color:#e8323f;font-size: 25px;">{{item.hprice}}元</span></h3>
                            </div>
                            <p style="margin-top:10px">
                                <span style="background-image: url(/img/danjian@2x.png);">{{item.hxing.split('|')[0]}}</span>
                                <span :style="{'background-image':item.hxing.split('|')[1]!='不限'?'url(/img/xingbie@2x.png)':'url(/img/buxian@2x.png)'}">{{item.hxing.split('|')[1]}}</span>
                                <span style="background-image: url(/img/ruzhu@2x.png);">{{day[i].split('/')[1]}}月{{day[i].split('/')[2]}}日入住</span>
                            </p>
                            <div style="margin-top:10px"><span style="background-image: url(/img/dizhi3x.png);background-repeat: no-repeat;background-position: left;background-size: 8px; display: inline-block;padding-left: 20px;font-size: 12px;color:#979798">{{item.s_dz}}</span></div>
                            <div style="width: 610px;margin-top:20px"><span style="display: inline-block;width: 40px;height: 20px;text-align: center;line-height: 20px; background-color:#eff6fa;color:#379ac7;font-size: 12px;">{{item.htype}}</span><span style="width: 100px;height: 20px;text-align: right;line-height: 20px; color:#c4c4c4;font-size: 12px;float: right;">{{day[i].split('/')[0]}}-{{day[i].split('/')[1]}}-{{day[i].split('/')[2]}}</span></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="height: 480px;width:270px;background-color:white;float: right;margin-top:20px;position: sticky;top:0;margin-bottom: 20px;">
                <div style="text-align: center;font-size: 14px;height: 50px;line-height: 50px;margin:0 20px;border-bottom: 1px solid #ededed;color:#5a5c5d;">关于巴乐兔找室友</div>
                <div style="height: 175px;margin: 0 15px;border-bottom: 1px solid #ededed;">

                    <div style="width: 130px;height: 130px;margin: 10px auto;"><img src="/img/zhaoshiyou_QRcode.png" alt="" style="width: 100%;height: 100%;vertical-align: middle;"></div>
                    <div style="text-align: center;"> <span style="font-size: 14px;text-align: center;">扫码进入小程序  快速找到好室友</span></div>
                </div>
                <div>
                    <div style="height: 24px;margin-top: 10px;;"><img src="/img/zhaoshiyou@2x.png" alt="" style="float: left;width: 24px;margin: 0 10px 0 47px;">
                        <p style="float: left;margin: 0;font-weight: 300;font-size: 20px;">直连真实用户</p>
                    </div>
                </div>
                <div style="margin: 10px 15px;text-align: center;font-size: 10px;color:#bababa">
                    <h5 style="font-weight: 100;">发现感兴趣的房子或者有趣的人可以留言</h5>
                    <h5 style="font-weight: 100;">私聊，电话隐号拨打下载App发布帖子</h5>
                    <h5 style="font-weight: 100;">每日置顶，还可以免费推广</h5>
                </div>
                <div style="margin: 10px 15px; border-radius: 15px;color:white;font-size: 14px; text-align: center;height:30px;width: 120px;margin: 0 auto;line-height: 30px;background-color: #379ac7;">
                    了解更多
                </div>
            </div>
        </div>
    </main>
    <my-footer></my-footer>
</div>
</template>
<script>
import MyHearder from '../components/MyHearder';
import MyFooter from '../components/MyFooter';
import {mapState} from 'vuex'
export default {
    components:{ MyHearder, MyFooter},
    data(){
        return{
            sss:true,
            xl:true,
            data:[],
            day:[],
            pic:[],
            data1:[],
            lex:'不限',
            small:'',
            big:'',
            dizhi:'',
            dz:[],
            duo:[]
        }
    },
    computed:{
        ...mapState(['city','cid'])
    },
    methods:{
        bian(e){
          if(e.target.innerText=='求租'){
              this.lex='求租'
             this.sss=false;
             this.axios.get(`/v1/house/qiu?cid=${this.cid}`).then(res=>{
            this.day=[];
            this.pic=[];
            for(var i of res.data){
                this.day.push(i.h_grade)
                this.pic.push(i.purl)
            }
            this.data=res.data;
        })
          }else if(e.target.innerText=='出租'){
              this.lex='不限'
             this.sss=true;
              this.axios.get(`/v1/house/shiyou?cid=${this.cid}`).then(res=>{
            console.log(res.data);
            this.day=[];
            this.pic=[];
            for(var i of res.data){
                this.day.push(i.h_grade)
                this.pic.push(i.purl)
            }
            this.data=res.data;
        })
          }
        },
        search(){
            this.mohu();
            if(this.dizhi=='')
           if( !isNaN(this.small)&&this.small!=''){
              if(!isNaN(this.big)&&this.big!=''){
                  var a = this.small
                Number(this.small)>Number(this.big)?(this.small=this.big,this.big=a):'';
                var str = []
                for(var i of this.data1){
                    if(i.hprice>this.small&&i.hprice<this.big){
                        str.push(i)
                    }
                }
                console.log(str)
                this.data=str;
              }
           } 
        },
        mohu(){
            var str = [];
            for(var i=0;i<this.zd.length;i++){
                if(this.zd[i].match(this.dizhi) != null){
                    str.push(this.data1[i])
                }
            }
           this.data=str;
           this.duo =str;
        },
        xiala(){
            // 
            if(this.lex=='求租'){
                this.xl=true;
            }else{
                this.xl=!this.xl
            }
        },
        zsy(){this.lex='找室友'
            var str = []
             this.xl=!this.xl;
             for(var i of this.data1){
                 if(i.htype=='找室友'){
                     str.push(i)
                 }
             }
             this.data=str;
             this.day=[];
            this.pic=[];
            for(var i of str){
                this.day.push(i.h_grade)
                this.pic.push(i.purl)
            }
        },
        zzu(){this.lex='转租'
            
             this.xl=!this.xl
             var str = [];
             for(var i of this.data1){
                 if(i.htype=='转租'){
                     str.push(i)
                 }
             }
             this.data=str;
             this.day=[];
            this.pic=[];
            for(var i of str){
                this.day.push(i.h_grade)
                this.pic.push(i.purl)
            }
        }
    },
    mounted(){
        
        this.axios.get(`/v1/house/shiyou?cid=${this.cid}`).then(res=>{
            console.log(res.data);
            this.data1=res.data
            var str = [];
            for(var i of this.data1){
                str.push(i.s_dz.replaceAll(" ", ""))
            }
            this.zd=str;
            this.day=[];
            this.pic=[];
            for(var i of res.data){
                this.day.push(i.h_grade)
                this.pic.push(i.purl)
            }
            this.data=res.data;
        })
      
    },
    watch:{
        city(){
            this.axios.get(`/v1/house/shiyou?cid=${this.cid}`).then(res=>{
            
            this.data1=res.data;
            var str = [];
            for(var i of this.data1){
                str.push(i.s_dz.replaceAll(" ", ""))
            }
            this.zd=str;
            this.day=[];
            this.pic=[];
            for(var i of res.data){
                this.day.push(i.h_grade)
                this.pic.push(i.purl)
            }
            this.data=res.data;
        })
        },
        lex(){
            this.big='';
            this.small='';
        },
    }
}
</script>
<style >
body {
    margin: 0;
    padding: 0;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tou li:first-child{
    margin-left: 20px;
}
.tou li:nth-child(even){
 width: 20px;
}
.tou li:nth-child(3){
    margin-left:6px
}
.tou li {
    float: left;
    font-size: 14px;
    line-height: 45px;
    width: auto;
    text-align: center;
    color: #666666;
    display: inline-block;
   
}
.tou li:last-child{
    margin-left: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-m {
    background-color: #fff;
}

.main-b>div>ul>li {
    font-size: 15px;
    text-indent: 35px;
    height: 30px;
    line-height: 30px;
    width: 200px;
}

.main-b>div>input {
    margin-left: 30px;
    outline: none;
    border: 1px solid #dedede;
    height: 29px;
    width: 300px;
    padding: 1px 2px;
}

.h_right ul {
    margin-left: -40px;
}

.main-b>div:nth-child(2)>input {
    margin-left: 30px;
    outline: none;
    border: 1px solid #dedede;
    height: 29px;
    width: 150px;
}

.main-b>div:nth-child(2)>input:last-child {
    margin-left: 0;
    margin-right: 5px;
}

.main-b>div:nth-child(3)>div>input {
    margin-left: 30px;
    outline: none;
    border: 1px solid #dedede;
    height: 29px;
    width: 150px;
    position: relative;
    z-index: 999;
    padding: 1px 2px;
}

.main-b>div {
    height: 80px;
    float: left;
    width: 394px;
    border-right: 1px solid #e5e5e5;
}

.main-b>div:last-child {
    border-right: 0;
}

.main-m>div>ul li {
    float: left;
    font-size: 17px;
    cursor: pointer;
    font-weight: 600;
    width: 50px;
    line-height: 75px;
    border-bottom: 4px solid red;
    padding: 0 10px;
}

.main-m>div>ul li:nth-child(2) {
    border-bottom: 2px solid transparent;
    font-weight: 500;
}



body header div div .h_left ul li:nth-child(5) div {
    position: absolute;
    width: 42px;
    height: 3px;
    bottom: 0;
    background-color: white;
}



.san li {
    height: 55px;
    margin: 10px 0;
    text-align: center;
    line-height: 55px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 9px 2px #cccccc;
}

#hid {
    position: relative;
}

.san>li>div {
    visibility: visible;
}

.san>li>div>div:nth-child(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 30px;
    background-color: #38393a;
    color: white;
    font-size: 14px;
    line-height: 30px;
}

.san>li>div>div:nth-child(2) {
    position: absolute;
    top: 7px;
    right: -16px;
    border: 8px solid #38393a;
    border-color: transparent transparent transparent #38393a;
}

.tou li:nth-child(1):hover {
    color: red;
    cursor: pointer;
}

.clear::after {
    content: '';
    display: block;
    clear: both;
}

.list {
    margin-top: 20px;
    width: 900px;
    position: relative;
    float: left;
}

.list>ul li {
    background-color: #fff;
    height: 150px;
    padding: 30px;
    margin-bottom: 20px;
}

.list>ul>li>div>div>h3>a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    color: black;
    font-weight: 300;
    font-size: 21px;
    display: block;
}

.list>ul>li>div>p>span {
    display: inline-block;
    margin-right: 20px;
    padding-left: 20px;
    color: red;
    font-size: 14px;
    background-repeat: no-repeat;
    background-position: left;
}

.list>ul>li>div {
    float: left;
}

.list>ul>li>div:nth-child(2) {
    margin-left: 20px;
}


body .onck {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

#chos li:hover {
    background-color: #ededed;
}

#chos {
    position: relative;
    top: -60px;
    left: 30px;
    width: 154px;
    height: 58px;
    font-size: 14px;
    border: 1px solid #dedede;
    border-top: 0;
    z-index: 500;
}

#chos li {
    cursor: pointer;
    height: 29px;
    padding-left: 10px;
    line-height: 29px;
    background-color: white;
}

body .onck>div {
    position: sticky;
    width: 700px;
    height: 400px;
    background-color: white;
    top: calc(50% - 200px);
    left: calc(50% - 350px);
    z-index: 1000;
    border-radius: 5px;
}

body .onck>div>div:nth-child(1) {
    margin: 0 auto;
    width: 600px;
    border-bottom: 1px solid #b6b1b1;
}

body .onck>div>div:nth-child(1) h2 {
    display: inline-block;
    padding: 25px 0;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 300;
}

body .onck>div>div:nth-child(1) .fis {
    display: inline-block;
    margin-left: 290px;
    color: grey;
    font-size: 16px;
}

body .onck>div>div:nth-child(1) .fis~span {
    cursor: pointer;
    color: grey;
    font-size: 16px;
}

body .onck>div>div:nth-child(1) .fis~span:hover {
    color: red;
}

body .onck>div>div:nth-child(1) ul {
    list-style: none;
}

body .onck>div>div:nth-child(1) ul li {
    float: left;
}

body .onck>div>div:nth-child(2) {
    margin: 0 auto;
    width: 600px;
    height: 300px;
}

body .onck>div>div:nth-child(2) ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body .onck>div>div:nth-child(2) ul li {
    width: 300px;
    float: left;
    margin: 15px 0;
}

body .onck>div>div:nth-child(2) ul li span {
    display: inline-block;
    width: 30px;
}

body .onck>div>div:nth-child(2) ul li a {
    margin-left: 20px;
    text-decoration: none;
    color: grey;
    font-size: 16px;
}

body .onck>div>div:nth-child(2) ul li a:hover {
    color: red;
}

body .onck>div>div:nth-child(3) {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -10px;
    right: 0;
    cursor: pointer;
}

body header div {
    height: 40px;
    background-color: #ee3843;
}

body header div div {
    font-size: 14px;
    height: 100%;
    margin: 0 auto;
    width: 1190px;
    color: #ffffff;
}

body header div div ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body header div div .h_left {
    width: 800px;
    float: left;
}

body header div div .h_left ul li:nth-child(1) {
    cursor: auto;
}

body header div div .h_left ul li {
    cursor: pointer;
    position: relative;
    line-height: 40px;
    float: left;
    margin: 0 25px;
}

body header div div .h_left ul li span:nth-child(1) {
    display: inline-block;
    width: 20px;
}

body header div div .h_left ul li a {
    color: #ffffff;
    text-decoration: none;
}

body header div div .h_left ul li:hover a {
    color: #fcd7d9;
}

body header div div .h_left ul li:after {
    content: '';
    width: 0;
    height: 3px;
    background: #ffffff;
    position: absolute;
    top: 93%;
    left: 50%;
    transition: .3s;
}

body header div div .h_left ul li:nth-child(2):hover:after,
body header div div .h_left ul li:nth-child(3):hover:after,
body header div div .h_left ul li:nth-child(4):hover:after,
body header div div .h_left ul li:nth-child(5):hover:after,
body header div div .h_left ul li:nth-child(6):hover:after,
body header div div .h_left ul li:nth-child(7):hover:after {
    left: 0%;
    width: 100%;
}

body header div div .h_right {
    width: 120px;
    float: right;
}

body header div div .h_right a {
    color: #ffffff;
    text-decoration: none;
    line-height: 40px;
    padding: 0 10px;
}

body header div div .h_right a:hover {
    cursor: pointer;
    color: #fcd7d9;
}

body footer .f_up {
    height: 190px;
    background-color: #d72a3a;
    background-position: center;
    position: relative;
}

body footer .f_up>div {
    margin: 0 auto;
    width: 1190px;
    height: 100%;
}

body footer .f_up>div div:nth-child(1) {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 21px;
}

body footer .f_up>div div:nth-child(2) {
    margin-left: 300px;
    width: 990px;
    height: 100%;
}

body footer .f_up>div div:nth-child(2) img {
    height: 150px;
    margin-top: 15px;
}

body footer .f_down {
    /* height: 720px; */
    background-color: #3b3d42;
}

body footer .f_down ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body footer .f_down>div {
    width: 1190px;
    height: 100%;
    margin: 0 auto;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2) {
    border-bottom: 0;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p {
    margin: 5px 0;
    padding: 0;
    font-weight: 300;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p img {
    margin-bottom: -4px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p>span:nth-child(1) {
    display: inline-block;
    width: 300px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) {
    margin-top: 10px;
    width: 1190px;
    border-bottom: 0;
    color: #aaacb3;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(1) {
    float: left;
    width: 650px;
    border-right: 1px solid #595b5f;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) {
    float: right;
    width: 450px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) img {
    margin-left: 20px;
    margin-top: 15px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(1) {
    width: 250px;
    float: left;
    border-right: 0;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(2) {
    width: 200px;
    float: left;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a {
    text-decoration: none;
    color: #aaacb3;
    font-size: 18px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a:hover {
    color: #fff;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li {
    margin-right: 80px;
    float: left;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p {
    font-weight: 500;
    margin: 5px 0;
    font-size: 16px;
    color: #8b8d92;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p:hover {
    color: white;
    cursor: pointer;
}

body footer .f_down>div>div>div {
    border-bottom: 1px solid #595b5f;
    padding-top: 20px;
    padding-bottom: 20px;
}

body footer .f_down>div>div>div ul {
    padding-top: 5px;
}

body footer .f_down>div>div>div>ul li {
    float: left;
    margin-right: 10px;
}

body footer .f_down>div>div>div>ul li a {
    text-decoration: none;
    color: #8b8d92;
}

body footer .f_down>div>div>div>ul li a:hover {
    color: #ffffff;
}

body footer .f_down>div>div>div::after {
    content: '';
    display: block;
    clear: both;
}

body footer .f_down>div p {
    text-align: left !important;
    margin: 0;
    font-weight: 600;
    color: #aaacb3;
}


/*# sourceMappingURL=moban.css.map */
</style>